/* 水平垂直居中方法：
1、通过定位设置
2、表格单元布局
3、display: flex
4、display: grid
*/

/* 公共代码 */
.wp {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  /* position: relative; */
  /* display: table-cell;
  text-align: center;
  vertical-align: middle; */
  /* display: flex;
  justify-content: center;
  align-items: center; */
  display: grid;
}
.box {
  background: green;
  /* position: absolute; */
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */
  /* margin-left: -50px;
  margin-top: -50px; */
  /* 计算属性：50%相对的父元素，计算符号左右之间必须有空格 */
  /* top: calc(50% - 50px);
  left: calc(50% - 50px); */
  /* display: inline-block; */
  align-self: center;
  justify-self: center;
}
.box.size {
  width: 100px;
  height: 100px;
}
/* 公共代码 */

/* 单行省略 */
/* .hideText {
  width: 200px;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

.hideText {
  width: 120px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 3em;
  /* 根据字体⼤⼩调整，例如，2 ⾏ * ⾏⾼（1.5em） */
  line-height: 1.5em;
}

.bg-img {
  height: 60px;
  width: 60px;
  background: url("../img/img0.png");
  background-position: -38px -41px;
  /* animation: identifier 2s infinite; */
  /* margin: 0 auto; */
  /* float: left; */
}

/* @keyframes identifier {
  0% {
    color: antiquewhite;
  }
  100% {
    color: aquamarine;
  }
} */
